<template>
  <div id="app">
    <button @click="titleLevel--">level-</button>
    <button @click="titleLevel++">level+</button>
    <!-- transition里面的必须是单根的,可以使用组件,但是只能使用一个组件,否则会出现问题,报错页面也显示不出来后面的东西 -->
    <!-- 他会作用到组件里面的根元素,得是真实的dom元素 -->
    <!-- transition本身不会生成任何元素 -->
    <transition name="title" appear>
      <!-- appear会让一开始就是页面一进来就出现动画 -->

      <!-- is设置的是什么，就生成什么 -->
      <!-- 这里会有过度效果 -->
      <component :is="`h${titleLevel}`">title level {{ titleLevel }}</component>

      <!-- 生成p标签 -->
      <!-- <component :is="`p`">title level {{ titleLevel }}</component> -->
    </transition>

    <transition mode="in-out">
      <!-- 先进入后消失，out-in 先消失后进入，默认是两个同时进行的 -->
      <!-- 这种的是可以的,因为同一时间是单根的 -->
      <!-- 一个消失,一个进入 ，但是得加key，想想diff-->
      <h1 v-if="show">111</h1>
      <h1 v-else>222</h1>
    </transition>

    <transition>
      <!-- 这种的是不可以的,因为有两个根 -->
      <!-- 剩一个就可以了,也会收到transition的影响 -->
      <h1 v-show="show">111</h1>
      <!-- <h1 v-show="!show">222</h1> -->
    </transition>

    <button @click="show = !show">toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleLevel: 1,
      show: true,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
}
.title-enter,
.title-leave-to {
  opacity: 0;
  /* 把transition写在title-leave-to也行 */
}
.title-enter-active,
.title-leave-active {
  transition: 3s;
}
</style>
